<template>
    <div class="swiper-container" :id='swiperId'>
        <div  class="swiper-wrapper">
            <slot></slot>
        </div>
    </div>
</template>

<script>
    import 'swiper'
    import 'swiper/dist/css/swiper.css'

    export default {
        components:{  },
        props:{
            swiperId:{
                type: String,
                default: 'swiper-id'
            },
            speed:{
                type: Number,
                default: 300
            },
            loop:{
                type: Boolean,
                default: true
            },
            autoplay:{
                type: Number,
                default: 5000
            },
            direction:{
                type: String,
                default: 'horizontal'
            },
            slidesPerView:{
                type: [Number,String],
                default: 1
            },
            centeredSlides: {
                type: String,
                default: ''
            },
            slideToClickedSlide: {
                type: Boolean,
                default: false
            },
            initialSlide: {
                type: Number,
                default: 1
            },
        },
        data() {
            return {
                
            }
        },
        computed:{

        },
        methods:{
            setSlide(){
                $(`#${this.swiperId}`).find('.swiper-wrapper').children().addClass('swiper-slide')

                // this.$nextTick(()=>{
                    this.setSwiper({
                        initialSlide:this.initialSlide,
                        pagination: '.swiper-pagination',
                        autoplayDisableOnInteraction:false,
                        autoplay:this.autoplay,
                        slidesPerView: this.slidesPerView,
                        loop: this.loop,
                        speed:this.speed,
                        direction: this.direction,
                        centeredSlides:this.centeredSlides,
                        slideToClickedSlide:this.slideToClickedSlide
                    })
                // })
            },
            setSwiper(params){
                const mySwiper = new Swiper(`#${this.swiperId}`,params);
            },
        },
        mounted(){
            this.$nextTick(()=>{
                this.setSlide()
            })
        },
    }
</script>

<style lang='scss'>
    @import "../sass/_variables";
    @import "../sass/_extends";
    @import "../sass/_mixins";

    .swiper-container{
        width: 100%;
        height: 100%;
    }
</style>


